<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/head.jsp"%>
<head>
<title>Insert title here</title>
<link href="${ctxStatic}/socket/images/dandan.css" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript">
var ctxStatic = '${ctxStatic}';
var userId = '${sessionScope.userId}';
var username = '${sessionScope.username}';
var basePath = '<%=basePath %>';

console.log("username =>" + username);

	if(username == null || username == ''){
		layer.open({
			type : 2, //类型：1-html,2-解析url
			closeBtn : 0, //关闭按钮是否显示 1显示0不显示
			title : '登录/注册页面', //页面标题
			shadeClose : false, //点击遮罩区域是否关闭页面
			shade : 0.5,
			//遮罩透明度
			area : [ '600px', '360px' ],
			//弹出层页面比例
			content : '${ctx}/sys/to/login-form', //弹出层的url
			end: function() {
				console.log("弹框关闭事件");
				layer.msg("登录成功", {icon: 6});
				
				location.reload(); //layer.open关闭刷新
			}
		});
	}
	//成员数组
	$arr_user = new Array();//Array('管理员', 'user_img/001.jpg')
</script>

<style type="text/css">
.rig_name{
	float: right;
    margin-right: 5px;
}
.rig_msg{
	margin: 20px -32px 0 0;
    float: right;
}
.my_say_con{
	margin-bottom: 35px;
}
.layui-icon{
	font-size: 15px;
    padding: 2px 15px;
}
.msg_num{
	border-radius: 18px;
	float: right;
}
</style>
</head>
<body>
<input type="hidden" id="ctxValue" value="<%=basePath %>" />
	<div id="mid_top">
		<!--  <div class="list">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="td_user td_user_click">老猪</td>
        <td class="td_hide td_hide_click">X</td>
      </tr>
    </table>
  </div>-->
	</div>
	<div id="top">头部</div>
	<div id="body">
		<div id="left">
			<div class="box">
				<p class="pi"><i class="layui-icon layui-icon-triangle-r">
					最近会话(<span class="n_geshu_1"></span>)
				</i></p>
				<ul class="ul ul_1">
					<!-- <li>好友列表</li> -->
				</ul>
				<p class="pi"><i class="layui-icon layui-icon-triangle-r">
					联系人(<span class="n_geshu_2"></span>)
				</i></p>
				<ul class="ul ul_2">
					<!-- <li>好友列表</li> -->
				</ul>
				<!-- <p class="pi"><i class="layui-icon layui-icon-triangle-r">
					离线好友(<span class="n_geshu_3"></span>)
				</i></p>
				<ul class="ul ul_3">
					<li>好友列表</li>
				</ul> -->
			</div>
			<div class="box_f"></div>
			<!-- <span class="layui-badge msg_num">2</span> -->
			
		</div>
		<div id="right">
			<div class="right_box">
				<div id="right_top">
					<!--<p><img src="images/head.jpg" alt="" /></p>好有头像-->
				</div>
				<div id="right_mid"></div>
				<div id="right_foot">蛋蛋</div>
				<div class="blank"></div>
			</div>
			<div class="right_box_foot"></div>
		</div>
		<div id="mid">
			<div id="mid_con">
				<div class="my_show">
					<div class="con_box">
						<div class="dandan_liaotian">
							<img src="${ctxStatic}/socket/user_img/back2.jpg" style="width: 56%;" alt="主界面" />
						</div>
					</div>
				</div>
			</div>
			<div id="mid_mid"></div>
			<div id="mid_foot">
				<div id="mid_say">
					<textarea name="" cols="" rows="" id="texterea"></textarea>
				</div>
				<div id="mid_sand">发送</div>
				<div class="blank"></div>
			</div>
			<div class="mid_box"></div>
		</div>
	</div>
	<!-- 消息数量：<span class="layui-badge msg_num">2</span> -->
<script type="text/javascript" src="${ctxStatic}/socket/js/dandan.js"></script>
<script type="text/javascript">
$(function() {
	var userId = '${userId}';
	if(userId != null && userId != '' && userId != "null"){
		console.log(userId)
		
		$.ajax({
			type: "get",
			url: "${ctx}/sys/findUserList",
			data: {'userId':userId},
			success: function(data) {
				console.log(data);
				
				//加载用户
				$(".ul").html(""); //初始清空原来留在那里让w3c通过的
				for(i = 0; i < data.userList.length; i++) {
					var imgurl = basePath + "/static/socket/user_img/qq0.jpg";
					dandan.newuser('.ul_2', Array(data.userList[i].name, imgurl), 
							data.userList[i].id, data.userList[i].status); //在线好友
					$arr_user[data.userList[i].id] = Array(data.userList[i].name,imgurl); //好友数组
					/* if(data.userList[i].status == 1){
						
					}else{
						dandan.newuser('.ul_3', Array(data.userList[i].name, imgurl), data.userList[i].id); //在线好友
					} */
				}
				console.log($arr_user); //用户数组
				/* for(i = 0; i < $arr_user.length; i++) {
					dandan.newuser('.ul_2', $arr_user[i], i); //创建用户
					console.log($arr_user[i])
				} */
			}
		});
	}
	
	$(".pi").click(function() {
		$(this).next(".ul").toggle(400);
	});
	
	$(".layui-icon").click(function(){
		//console.log($(this)[0].className);
		var className = $(this)[0].className;
		if(className == 'layui-icon layui-icon-triangle-r'){
			$(this).removeClass("layui-icon-triangle-r");
			$(this).addClass("layui-icon-triangle-d");
		}else{
			$(this).removeClass("layui-icon-triangle-d");
			$(this).addClass("layui-icon-triangle-r");
		}
	})
})
</script>
</body>
</html>